﻿<style type="text/css">

    body {
	    margin:0;
	    padding:0;
        padding-top: 40px;
        padding-bottom: 40px;	    
    }

    #board {
	    width:100%;
	    clear:both;
	    float:left;
	    position:relative;
        font-family:Arial;
	    font-size:85%;	
        line-height:18px;
    }

    #todo, #doing, #done {
	    width:33%;
	    float:left;
	    position:relative;
        min-height:600px;
    }

    #todo {
	
    }

    #doing{
	    border-left:1px solid silver;
	    border-right:1px solid silver;
    }

    #done{

    }

    #tools {
	    clear:both;
	    text-align:center;
	    width: 100%;
	    height: 70px;
	    background-color:#fff;
	    z-index:9999;
    }

    #tools img {
	    margin:0 20px;
    }

    #tools img:hover {
	    top:-5px;
    }

    h2 {
	    padding: 0;
	    margin:0;
	    text-align:center;
        font-size:160%;
    }

   .postit {
	    z-index:700;
	    width:110px;
	    height:110px;
	    float:left;	
	    margin:0px;
	    padding:15px;
	    overflow:hidden;
        line-height:18px;
	    /*background: transparent url(@Url.Content("~/Images/postit.png")) no-repeat scroll center center;*/
    }   

    .tipo1 {
        background: transparent url(@Url.Content("~/Images/nota-amarela.png")) no-repeat scroll top center;
    }

    .tipo2 {
        background: transparent url(@Url.Content("~/Images/nota-rosa.png")) no-repeat scroll top center;
    }

    .tipo3 {
        background: transparent url(@Url.Content("~/Images/nota-azul.png")) no-repeat scroll top center;
    }

    .tipo4 {
        background: transparent url(@Url.Content("~/Images/nota-verde.png")) no-repeat scroll top center;
    }

    .fechar {
        position:absolute;
        left:123px;
        top:1px;
        display:none;
    }

    .edit {
        width:110px;
        height:110px;
        display:none;
        background-color:transparent;
        overflow:auto;
        font-family:Arial;
	    font-size:100%;	
        margin:0;
        padding:0;
    }

    .view {
        width:110px;
        height:93px;
        display:block;
        background-color:transparent;
        overflow:hidden;
        font-family:Arial;
	    font-size:100%;	
        margin:0;
        padding:0;
    }

    .responsavel:before {
        content: ' ';
    }

</style>



<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">   
            
            <a class="brand" id="nomeQuadro" title="Voltar para a página inicial" href="/Home/Index"></a>  
            
            
             <ul class="nav pull-right">                    
                    <li>
                       <img src="@Url.Content("~/Images/ajax-loader.gif")" style="margin-top:2px; display:none" id="loading" /> 
                    </li>
            </ul>                        
        </div>

       
    </div>
</div>


<div id="board">

    <div id="todo" data-status="1">       
            <h2>To do <span class="total"></span></h2>
        
    </div>

    <div id="doing" data-status="2">
        <h2>Doing <span class="total"></span></h2>        
    </div>

    <div id="done" data-status="3">
        <h2>Done <span class="total"></span></h2>
    </div>

</div>




@section scripts{
 <script src="~/Scripts/jquery.signalR-1.1.3.min.js"></script>
 <script src="~/signalr/hubs"></script>
<script type="text/javascript">
    $(function () {
        var quadros = [@Html.Raw(ViewBag.QuadrosId)];
        var nomes = [@Html.Raw(ViewBag.QuadrosNome)];
        var quadroAtual = 0;
        var url_base = '@Url.Content("~")';

        //---------------------------------------------------
        // SIGNALR
        //--------------------------------------------------
        // definição do hub
        var tarefasHub = $.connection.atualizacoesHub;

        // declaração dos métodos que serão chamados no cliente
        tarefasHub.client.adicionar = function (tarefa) {
            AdicionarTarefa(tarefa, true);
        };

        tarefasHub.client.excluir = function (tarefa) {
            ExcluirTarefa(tarefa);
        };

        tarefasHub.client.mover = function (tarefa) {
            MoverTarefa(tarefa);
        };

        tarefasHub.client.editar = function (tarefa) {
            Editar(tarefa);
        };       


        function Exibir(quadro) {

            var req = $.ajax({
                url: url_base + 'api/tarefas?idQuadro=' + quadro,
                type: 'GET',
                dataType: 'json',
                cache: false,
                contentType: "application/json;charset=utf-8"
            });

            req.done(function (json) {

                $('#todo .postit').remove();
                $('#doing .postit').remove();
                $('#done .postit').remove();

                if (json != null) {                
                    for (var i = 0; i < json.length; i++) {
                        AdicionarTarefa(json[i], false);
                    }
                }
             
                AtualizarAltura();
                AtualizarContagem();
            });

            req.fail(function (jqXHR, textStatus, errorThrown) {
                $('#todo .postit').remove();
                $('#doing .postit').remove();
                $('#done .postit').remove();

                AtualizarAltura();
                AtualizarContagem();


               var resultado = $.parseJSON(jqXHR.responseText);
               alert(resultado["ExceptionMessage"]);
            });
        }

        function AtualizarContagem(){
            $('span.total').each(function(i, item){
                var total = $(item).parent().parent().find('.postit').length;
                $(item).text('(' + total + ')');
            });
        }

        function MontarQuadro(json) {
            var botao = '<a href="#novaTarefa" style="margin:3px" class="btn btn-success" data-toggle="modal" data-target="#novaTarefa"> <i class="icon-plus icon-white"></i> Tarefa </a>';
            var div = '';

            if (json.Colunas != null) {
                for (var i = 0; i < json.Colunas.length; i++) {
                    if (i == 0) {
                        div = ' <div id="done" data-status="' + json.Colunas[i].Id + '" style="margin-top:-40px">' + botao + '<h2>' + json.Colunas[i].Nome + ' <span class="total"></span></h2></div>';
                    } else {
                        div = ' <div id="done" data-status="' + json.Colunas[i].Id + '"><h2>' + json.Colunas[i].Nome + ' <span class="total"></span></h2></div>';
                    }
                    $('#board').append(div);
                }
            }

        }

        function MontarTarefa(tarefa) {

            if(tarefa.Excluido)
                return '';

            var html = '<div class="postit tipo' + tarefa.Tipo + '" data-status="' + tarefa.Status + '" data-idTarefa="' + tarefa.Id + '"><img class="fechar" src="/Images/Close-icon.png" style="width:16px;height:16px" /><span class="descricao"><span class="view">' + tarefa.Descricao + '</span><textarea class="edit">' + tarefa.Descricao + '</textarea></span>';

            // o id 1 é igual a sem responsável
            if (tarefa.Responsavel == null || tarefa.Responsavel.Id == 0) {
                html += '<span class="responsavel"></span>';
            } else {
                html += '<span class="responsavel"> @@' + tarefa.Responsavel.Nome + '</span>';
            }

            return html;
        }                


        function AdicionarTarefa(tarefa, acertarTela){
            if(tarefa.Status == 1){
                $('#todo').append(MontarTarefa(tarefa));
            }

            if(tarefa.Status == 2){
                $('#doing').append(MontarTarefa(tarefa));
            }

            if(tarefa.Status == 3){
                $('#done').append(MontarTarefa(tarefa));
            }

            if(acertarTela){
                AtivarDrag();
                AtualizarContagem();
                AtualizarAltura();
            }
        }

        function Editar(tarefa){
            //alert(tarefa.Descricao);
            //alert(tarefa.Descricao);
            $('[data-idTarefa='+tarefa.Id+']').find('.view').text(tarefa.Descricao);
            $('[data-idTarefa='+tarefa.Id+']').find('.edit').val(tarefa.Descricao);

        }



        function ExcluirTarefa(tarefa){
            $('.postit[data-idTarefa='+ tarefa.Id +']').remove();
            AtualizarContagem();
            AtualizarAltura();
        }

        function MoverTarefa(tarefa){
            ExcluirTarefa(tarefa);
            AdicionarTarefa(tarefa, true);
        }      

        function AtualizarAltura() {
            var a = $('#todo').outerHeight();
            var b = $('#doing').outerHeight();
            var c = $('#done').outerHeight();
            var d = $('body').outerHeight();

            var maior = a;

            if (b > maior)
                maior = b;

            if (c > maior)
                maior = c;

            if (d > maior)
                maior = d;

            $('#todo').height(maior);
            $('#doing').height(maior);
            $('#done').height(maior);
        }        

        Loading();
        $.connection.hub.start(function(){                        
            if (quadros.length > 0) {
                ExibirProximoQuadro();
                window.setInterval(ExibirProximoQuadro, 1000 * 10);                
            }

            Loading();

            
        });

        function ExibirProximoQuadro() {
            if (quadroAtual < quadros.length) {
                Exibir(quadros[quadroAtual]);

                $('#nomeQuadro').text(nomes[quadroAtual]);

            } else {
                window.location.reload();
            }

            quadroAtual++;
        }

        function Loading() {
            $('#loading').toggle();
        }
        
        
    });

</script>      
}